 /*
 * @description: 店铺公告-预览
 * @Author: along
 * @Date: 2020-09-14
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-10 10:23:37
 */
<template>
    <div class="notice-detail shopNoticeLook">
        <div
            class="wrap"
            v-loading="loading"
        >
            <div class="wrap-title">
                <div class="wrap-title-text">
                    {{ title }}
                </div>
                <div
                    class="wrap-title-time"
                    v-if="publishTime > 0"
                >
                    {{ publishTime*1000 | dateFormat('yyyy-MM-dd HH:mm:ss') }}发布
                </div>
            </div>
            <div id="ueditor">
                <p v-html="content" />
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
export default {
    data () {
        return {
            announce_no:'',
            loading: false,
            // title: '',
            publishTime: 0,
            content: '',
        };
    },
    filters: {},
    computed: {
    },
    watch: {
        $route(val){
            if(val.query.announce_no && this.announce_no !== val.query.announce_no){
                this.announce_no = this.$route.query.announce_no;
                this.getData();
            }
        }
    },
    created(){
        this.announce_no = this.$route.query.announce_no;
        this.getData();
        this.$store.commit('header/SET_HEADER', [
            {title: '店铺概况', path: '/'},
            {title: '公告通知', path: '/manage/message/notice', query: {}},
            {title: '公告详情'}
        ]);
    },
    mounted () {
    },
    methods: {
        /**
         * @description 获取数据
         */
        getData () {
            this.loading = true;
            this.$post('/Announce/detail', {
                announce_no: this.announce_no
            }, resp => {
                if (resp.code == 1) {
                    this.title = resp.data.announce_title;
                    this.publishTime = resp.data.publish_time;
                    this.content = resp.data.announce_content;
                }else{
                    this.$notify.error({
                        title: '错误',
                        duration: 2000,
                        message: resp.msg
                    });
                }
                this.loading = false;
            }, () => {
                this.loading = false;
            });
        },

        /**
         * @description 预览图片
         */
        previewImage () {
            if(document.querySelectorAll) {
                let image = document.querySelectorAll('#ueditor img');

                if(image.length) {
                    for(let key=0; key<image.length; key++){
                        let imageDom = image[key];

                        if(imageDom.src.includes('.gif')) {
                            imageDom.style.width = 'auto';
                        }
                        if(!imageDom.src.includes('.gif') && !imageDom.width) {
                            imageDom.style.width = '100%';
                        }

                        image[key].addEventListener('click', () => {
                            if(!image[key].src.includes('.gif')) {
                                this.$refs.preview.show([
                                    image[key].src
                                ], 0);
                            }
                        },true);
                    }
                } else {
                    return false;
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
.notice-detail {
    background-color: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    .wrap {
        width: 100%;
        flex: 1;
        background-color: #fff;
    }
}
</style>

<style lang="less">
.shopNoticeLook {
    .wrap-title {
        padding: 24px;
        padding-bottom: 0;
        &-text{
            font-size: 20px;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
            font-weight: bold;
        }
        &-time{
            margin-top: 13px;
            border-bottom: 1px #F0F2F5 solid;
            margin-bottom: 24px;
            font-size: 13px;
            font-weight: 400;
            color: #999999;
            line-height: 13px;
            padding-bottom: 16px;

        }
    }
    #ueditor {
        font-family:'Microsoft YaHei';
        background-color: #fff;
        padding: 0 24px;
        h1, h2, h3, h4 {
            color: #111111;
            font-weight: 400;
            margin-top: 1em;
        }
        img {
            cursor: pointer;
            max-width: 100% !important;
            height: auto;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family:'Microsoft YaHei';
            font-weight: 500;
        }
        h1, h2, h3, h4, h5,h6, dl{
            margin-bottom: 16px;
            padding: 0;
        }
        p {
            margin: 8px 0;
        }
        h1 {
            font-size: 20px;
            line-height: 54px;
        }
        h2 {
            font-size: 19px;
            line-height: 42px;
        }
        h1, h2 {
            // border-bottom: 1px solid #EFEAEA;
            padding-bottom: 10px;
        }
        h3 {
            font-size: 18px;
            line-height: 30px;
        }
        h4 {
            font-size: 17px;
            line-height: 26px;
        }
        h5 {
            font-size: 16px;
            list-style: 23px;
        }
        h6 {
            font-size: 15px;
            list-style: 20px;
        }
        a {
            color: #0099ff;
            margin: 0;
            padding: 0;
            vertical-align: baseline;
        }
        a:hover {
            text-decoration: none;
            color: #ff6600;
        }
        ul, ol {
            padding: 0;
            padding-left: 24px;
            margin: 0;
        }
        li {
            line-height: 24px;
        }
        p, ul, ol {
            font-size: 16px;
            line-height: 24px;
        }

        ol ol, ul ol {
            list-style-type: lower-roman;
        }

        pre {
            max-width: 800px;
            white-space: pre-wrap;
            line-height: 1.7em;
            overflow: auto;
            padding: 6px 10px;
        }
        aside {
            display: block;
            float: right;
            width: 390px;
        }
        blockquote {
            border-left:.5em solid #eee;
            padding: 0 0 0 2em;
            margin-left:0;
        }
        blockquote  cite {
            font-size:14px;
            line-height:20px;
            color:#bfbfbf;
        }
        blockquote cite:before {
            content: '\2014 \00A0';
        }

        blockquote p {
            color: #666;
        }
        hr {
            text-align: left;
            color: #999;
            height: 2px;
            padding: 0;
            margin: 16px 0;
            background-color: #e7e7e7;
            border: 0 none;
        }

        dl {
            padding: 0;
        }

        dl dt {
            padding: 10px 0;
            margin-top: 16px;
            font-size: 1em;
            font-style: italic;
            font-weight: bold;
        }

        dl dd {
            padding: 0 16px;
            margin-bottom: 16px;
        }

        dd {
            margin-left: 0;
        }

        button,
        input,
        select,
        textarea {
            font-size: 100%;
            margin: 0;
            vertical-align: baseline;
            *vertical-align: middle;
        }
        button, input {
            line-height: normal;
            *overflow: visible;
        }
        button::-moz-focus-inner, input::-moz-focus-inner {
            border: 0;
            padding: 0;
        }
        button,
        input[type="button"],
        input[type="reset"],
        input[type="submit"] {
            cursor: pointer;
            -webkit-appearance: button;
        }
        input[type=checkbox], input[type=radio] {
            cursor: pointer;
        }
        input:not([type="image"]), textarea {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }

        input[type="search"] {
            -webkit-appearance: textfield;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }
        input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }
        label,
        input,
        select,
        textarea {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 13px;
            font-weight: normal;
            line-height: normal;
            margin-bottom: 18px;
        }
        input[type=checkbox], input[type=radio] {
            cursor: pointer;
            margin-bottom: 0;
        }
        input[type=text],
        input[type=password],
        textarea,
        select {
            display: inline-block;
            width: 210px;
            padding: 4px;
            font-size: 13px;
            font-weight: normal;
            line-height: 18px;
            height: 18px;
            color: #808080;
            border: 1px solid #ccc;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        select, input[type=file] {
            height: 27px;
            line-height: 27px;
        }
        textarea {
            height: auto;
        }
        /* grey out placeholders */
        :-moz-placeholder {
            color: #bfbfbf;
        }
        ::-webkit-input-placeholder {
            color: #bfbfbf;
        }
        input[type=text],
        input[type=password],
        select,
        textarea {
            -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
            -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
            transition: border linear 0.2s, box-shadow linear 0.2s;
            -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        input[type=text]:focus, input[type=password]:focus, textarea:focus {
            outline: none;
            border-color: rgba(82, 168, 236, 0.8);
            -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
            -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
        }
        /* buttons */
        button {
            display: inline-block;
            padding: 4px 14px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 13px;
            line-height: 18px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            background-color: #0064cd;
            background-repeat: repeat-x;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            border: 1px solid #004b9a;
            border-bottom-color: #003f81;
            -webkit-transition: 0.1s linear all;
            -moz-transition: 0.1s linear all;
            transition: 0.1s linear all;
            border-color: #0064cd #0064cd #003f81;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }
        button:hover {
            color: #fff;
            background-position: 0 -15px;
            text-decoration: none;
        }
        button:active {
            -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        button::-moz-focus-inner {
            padding: 0;
            border: 0;
        }
        table {
            border-spacing: 0;
            width: 100%;
        }
        table {
            border: solid #ccc 1px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
        }
        table tr:hover {
            background: #fbf8e9;
            -o-transition: all 0.1s ease-in-out;
            -webkit-transition: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            -ms-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }
        table td, .table th {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        table th {
            border-top: none;
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
            padding: 5px;
        }

        table td:first-child, table th:first-child {
            border-left: none;
        }

        table th:first-child {
            -moz-border-radius: 6px 0 0 0;
            -webkit-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
        }
        table th:last-child {
            -moz-border-radius: 0 6px 0 0;
            -webkit-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
        }
        table th:only-child{
            -moz-border-radius: 6px 6px 0 0;
            -webkit-border-radius: 6px 6px 0 0;
            border-radius: 6px 6px 0 0;
        }
        table tr:last-child td:first-child {
            -moz-border-radius: 0 0 0 6px;
            -webkit-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
        }
        table tr:last-child td:last-child {
            -moz-border-radius: 0 0 6px 0;
            -webkit-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
        }
        ol li {
            list-style: decimal;
        }
        ul li {
            list-style: outside;
        }
        strong {
            font-weight: 500;
        }
        strong>em {
            font-weight: 500;
        }
        p {
            word-break: break-all;
            margin: 0;
            font-size: 15px;
        }
    }
}
</style>